<template>
	<view class="container">
		<view class="reading-progress-bar">
			<view class="progress-bar-title">
				本次阅读任务进度
			</view>
			<!-- 这里要写进度条 -->
			<view class="progress-container">
				<view class="progress-bar" :style="`width: ${progress}%;`">
					<span class="progress-percentage">{{progress}}%</span>
					<image src="@/static/images/read/red.png" class="progress-icon" />
				</view>
				<image class="icon-gif" src="@/static/images/read/red-g.gif" />
			</view>
		</view>
		<view class="text_tips">
			<view class="text_tips_02">阅读赚现金</view>
			<view class="text_tips_03">
				满3个任务获得20元红包
				<image src="@/static/images/read/highest.png" mode=""></image>
			</view>
			<view class="text_tips_04">-----------</view>
			<view class="text_tips_05">点击下放任务栏获取文章</view>
			<view class="text_tips_06">现金红包秒到账</view>
		</view>
		<view class="down"></view>
		<view class="rw_container">
			<view class="item">
				<image class="img1" src="@/static/images/read/task01.png" mode=""></image>
				<view class="tips">任务一:</view>
				<view class="btn_y" v-if="taskInfo.sectionTask1">已完成</view>
				<view class="btn_n" v-else @click="getWxLink(1)">去完成</view>
			</view>
			<view class="item">
				<image class="img2" src="@/static/images/read/task02.png" mode=""></image>
				<view class="tips">任务二:</view>
				<view class="btn_y" v-if="taskInfo.sectionTask2">已完成</view>
				<view class="btn_n" v-else @click="getWxLink(2)">去完成</view>
			</view>
			<view class="item">
				<image class="img3" src="@/static/images/read/task03.png" mode=""></image>
				<view class="tips">任务三:</view>
				<view class="btn_y" v-if="taskInfo.sectionTask3">已完成</view>
				<view class="btn_n" v-else @click="getWxLink(3)">去完成</view>
			</view>
		</view>
		<view class="bomtips">完成任务后,返回到此页面</view>
	</view>

	<uni-popup ref="tipsPopup" type="center" mask-background-color="rgba(0,0,0,0.9)" :is-mask-click="false">
		<view class="tips_popup">
			<view class="tips">该页面已过期，请回复“1”获取新文章</view>
			<button class="btn" @click="closePage">关闭</button>
		</view>
		
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue"
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import URL from "@/config.js"
	onLoad((options) => {
		token.value = options.token
	})
	onShow(() => {
		nextTick(() => {
			getTaskInfo()
		})
	})

	let token = ref(null)
	let taskInfo = ref({})
	let tipsPopup = ref(null)
	// 关闭页面
	function closePage() {
		setTimeout(function() {
			//这个可以关闭安卓系统的手机
			document.addEventListener(
				"WeixinJSBridgeReady",
				function() {
					WeixinJSBridge.call("closeWindow");
				},
				false
			);
			//这个可以关闭ios系统的手机
			WeixinJSBridge.call("closeWindow");
		}, 20);
	}
	// 获取任务进度
	function getTaskInfo() {
		uni.showLoading({
			mask: true,
			title: '正在加载...'
		})
		uni.request({
			header: {
				Authorization: `Bearer ${token.value}`
			},
			url: `${URL.HTTP}/api/web/usertask/GetTaskProgress`,
			success(res) {
				uni.hideLoading()
				if (res.statusCode == 200) {
					// 有倒计时：第一轮已做完
					if (res.data.timeInterval) {
						location.assign("/")
					}
					// 轮数为2并且阅读了12篇：第二轮已做完
					if (res.data.currentRound == 2 && res.data.articleCount == 12) {
						location.assign("/")
					}
					// console.log(res.data);
					taskInfo.value = res.data
					chuangeProgress(res.data.articleCount)
				} else if (res.statusCode == 507) {
					uni.showToast({
						title: res.data.title,
						icon: "none",
						mask: true
					})
				} else if (res.statusCode == 401) {
					tipsPopup.value.open()
				} else {
					uni.showToast({
						title: "未知错误",
						icon: "none",
						mask: true
					})
				}
			},
			fail(err) {
				uni.hideLoading()
				uni.showToast({
					title: "未知错误",
					icon: "none",
					mask: true
				})
			}
		})
	}
	// 阅读进度条
	let progress = ref(0)

	function chuangeProgress(num) {
		progress.value = (num / 12 * 100).toFixed(0)
	}
	// 获取企业微信客服链接
	function getWxLink(SectionTask) {
		uni.showLoading({
			mask: true,
			title: '正在获取链接...'
		})
		uni.request({
			header: {
				Authorization: `Bearer ${token.value}`
			},
			url: `${URL.HTTP}/api/web/UserTask/GetWxWorkLink`,
			data: {
				SectionTask
			},
			success(res) {
				uni.hideLoading()
				console.log(res);
				if (res.statusCode === 200) {
					window.location.assign(res.data)
				} else if (res.statusCode === 507) {
					uni.showToast({
						title: res.data.title,
						icon: "none",
						mask: true
					})
				} else {
					uni.showToast({
						title: "未知错误",
						icon: "none",
						mask: true
					})
				}
			},
			fail(err) {
				uni.hideLoading()
				uni.showToast({
					title: "未知错误",
					icon: "none",
					mask: true
				})
			}
		})

	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		min-height: 100vh;
		background: rgb(81, 126, 245);
		display: flex;
		flex-direction: column;
		align-items: center;

		.reading-progress-bar {
			width: 85%;
			margin-top: 50rpx;

			.progress-bar-title {
				font-size: 42rpx;
				color: #fff600;
				text-align: center;
				font-weight: bold;
				letter-spacing: 4rpx;
			}

			.progress-container {
				width: 100%;
				height: 50rpx;
				border-radius: 4rpx;
				position: relative;
				background-image: url(@/static/images/read/progress-bg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				padding: 0 20rpx 0 6rpx;
				margin-top: 10rpx;

				.progress-bar {
					width: 0;
					height: 40rpx;
					background-image: linear-gradient(0deg, #e4630d 0%, #ffd800 100%), linear-gradient(#ffffff, #ffffff);
					background-blend-mode: normal, normal;
					border-radius: 20rpx 0 0 20rpx;
					transition: width 0.5s ease;
					position: relative;
					display: flex;
					align-items: center;
				}

				.progress-percentage {
					position: absolute;
					right: 0;
					bottom: 2.5px;
					color: #FFFFFF;
					font-size: 26rpx;
					font-weight: bold;
				}

				.progress-icon {
					position: absolute;
					right: -35rpx;
					bottom: -5rpx;
					width: 36rpx;
					height: 50rpx;
				}

				.icon-gif {
					width: 83rpx;
					height: 72rpx;
					position: absolute;
					right: -40rpx;
				}
			}
		}

		.text_tips {
			width: 100%;
			height: fit-content;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			.text_tips_02 {
				color: rgb(255, 240, 0);
				font-size: 70rpx;
				letter-spacing: 5px;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
				margin-top: 50rpx;
				font-weight: bold;
			}

			.text_tips_03 {
				color: rgb(255, 240, 0);
				font-size: 46rpx;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
				position: relative;
				margin-top: 15rpx;
				font-weight: bold;

				image {
					width: 62rpx;
					height: 24rpx;
					position: absolute;
					right: 30rpx;
					top: -20rpx;
				}
			}

			.text_tips_04 {
				font-size: 60rpx;
				font-weight: bold;
				letter-spacing: 10rpx;
				color: #FFFFFF;
				margin: 30rpx 0;
			}

			.text_tips_05 {
				color: #FFFFFF;
				font-size: 56rpx;
			}

			.text_tips_06 {
				color: #FFFFFF;
				font-size: 66rpx;
			}
		}

		.down {
			width: 107rpx;
			height: 107rpx;
			background: center/100% 100% url(@/static/images/read/down.png);
			margin: 50rpx 0;
		}

		.rw_container {
			width: 650rpx;
			height: 400rpx;
			padding: 50rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.item {
				width: 100%;
				display: flex;
				align-items: center;

				.img1 {
					width: 59rpx;
					height: 70rpx;
				}

				.img2 {
					width: 50rpx;
					height: 65rpx;
				}

				.img3 {
					width: 64rpx;
					height: 56rpx;
				}

				.tips {
					font-size: 60rpx;
					margin-left: 30rpx;
				}

				.btn_n {
					width: 160rpx;
					height: 60rpx;
					border: 2rpx solid rgb(2, 213, 62);
					border-radius: 15rpx;
					color: rgb(2, 213, 62);
					font-size: 36rpx;
					text-align: center;
					line-height: 56rpx;
					margin-left: auto;
				}

				.btn_y {
					width: 170rpx;
					height: 70rpx;
					background: rgb(159, 166, 172);
					border-radius: 15rpx;
					color: #ffffff;
					font-size: 36rpx;
					text-align: center;
					line-height: 70rpx;
					margin-left: auto;
				}
			}
		}

		.bomtips {
			margin: 30rpx 0;
			color: #ffffff;
			font-size: 42rpx;
			font-weight: bold;
			letter-spacing: 4rpx;
		}
	}

	.tips_popup {
		.tips {
			font-size: 36rpx;
			color: #cecece;
		}
		.btn {
			width: 140rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			margin-top: 60rpx;
			color: #474747;
		}
	}
</style>